<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jixi-query</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <style>
        .sqltxt{
            border:1px solid;
            border-radius:12px;
            box-shadow: 2px 2px 5px #bbb;
            font-size: 20px;
        }
    </style>

    <style type="text/css" media="screen">

        .ace_editor {
            border: 1px solid lightgray;
            margin: auto;
            height: 200px;
            width: 80%;
        }
        .buttonmargin {
            height: 40px;
            text-align: center;
        }


    </style>
</head>
<body>
<h3>返回的数据：</h3>

<div class="buttonmargin">
    <button onclick="clearLog()">清屏</button>
</div>

<div id="log-container" style="height: 300px; margin: auto;width: 80%;overflow-y: scroll; background: #333; color: #aaa; ">
    <div></div>
</div>


<pre id="editor">

</pre>

<div class="buttonmargin">
    <button onclick="executeSql()">执行sql</button>
</div>


<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ext-language_tools.js"></script>


<script src="/static/scripts/mode-sql.js"></script>
<script src="/static/scripts/presto-util.js"></script>
<script src="/static/scripts/presto-complete.js"></script>

<script>

    var stompClient;
    var channel = getChannel();
    openSocket(stompClient, channel);


    function getChannel() {
        var url = "/v1.0/sqlpad/presto/execute";
        var params= {'sql':null};
        var channel;
        $.ajax({
            type:'GET',
            url:url,
            data:params,
            async:false,
            cache:false,
            success:function(data){
                channel = data.data;
                return channel;
            },
            error:function (data) {
                console.log("网络异常!请刷新页面尝试重连...");
            }
        });
        return channel;
    }

    function executeSql() {
        var url = "/v1.0/sqlpad/presto/execute";

        var editor = sqlpad.initSqlEditor();

        var selectionRange = editor.getSelectionRange();
        var sqltext = editor.session.getTextRange(selectionRange);

        if(!sqltext)
        {
            sqltext = editor.getValue();
        }

        var params= {'sql':sqltext};
        var channel;
        $.ajax({
            type:'GET',
            url:url,
            data:params,
            async:false,
            cache:false,
            success:function(data){
                channel = data.data;
                return channel;
            },
            error:function (data) {
                console.log("网络异常!请刷新页面尝试重连...");
            }
        });
        return channel;
    }

    function openSocket(stompClient, channel) {
        if(stompClient==null){
            var socket = new SockJS('/websocket');
            stompClient = Stomp.over(socket);

            stompClient.connect({}, function(frame) {
                stompClient.subscribe('/channel/' + channel + '/pullMessage', function(event) {
                    var content=JSON.parse(event.body);
                    $("#log-container div").append(JSON.stringify(content)).append("<br/>");
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                });
            });
        }
    }

    function closeSocket(stompClient) {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient=null;
        }
    }

    function clearLog() {
        $("#log-container div").html('');
    }

</script>
</body>
</html>